<template>
  <el-form :model="$data" ref="form" label-width="130px" :rules="rules" label-position="right" v-loading="loading">
    <el-row :gutter="15">
      <el-col :span="24">
        <el-form-item label="客户类型" prop="memberType">
          <el-radio-group v-model="memberType">
            <el-radio v-for="dict in dict.type.memberType" :key="dict.value" :label="parseInt(dict.value)">{{ dict.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>

<!--      <el-col :span="24">-->
<!--        <el-form-item label="客户来源" prop="memberSource">-->
<!--          <el-radio-group v-model="memberSource">-->
<!--            <el-radio v-for="dict in dict.type.memberSource" :key="dict.value" :label="parseInt(dict.value)">{{ dict.label-->
<!--            }}</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--      </el-col>-->

      <template v-if="memberType == 1">
        <el-col :span="12">
          <el-form-item label="企业名称" prop="enterpriseName">
            <el-input v-model="enterpriseName" placeholder="请输入企业名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码">
            <el-input v-model="creditCode" placeholder="请输入统一社会信用代码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="企业地址">
            <el-input v-model="enterpriseAdderss" placeholder="请输入企业地址" style="width: 100% !important;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="营业执照">
            <ImageUpload v-model="businessLicenseUrl" :limit="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业联系人" prop="memberName">
            <el-input v-model="memberName" placeholder="请输入客户名称"></el-input>
          </el-form-item>
        </el-col>
      </template>

      <template v-if="memberType == 2">
        <el-col :span="12">
          <el-form-item label="客户名称" prop="memberName">
            <el-input v-model="memberName" placeholder="请输入客户名称"></el-input>
          </el-form-item>
        </el-col>
      </template>

      <el-col :span="12">
        <el-form-item label="联系电话" prop="contactPhone" :error="phoneError">
          <el-input v-model.number="contactPhone" placeholder="请输入联系电话" maxlength="11"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="联系地址">
          <el-input v-model="contactAddress" placeholder="请输入联系地址"></el-input>
        </el-form-item>
      </el-col>


      <el-col :span="24">
        <el-form-item label="证件类型" style="width: 49.5%">
          <el-select v-model="documentType" clearable>
            <template v-for="dict in dict.type.document_type">
              <el-option :label="dict.label" :value="parseInt(dict.value)" :key="parseInt(dict.value)"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="证件号码">
          <el-input v-model="cardId" placeholder="请上传证件"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="失效日期">
          <!--                    <el-input v-model="cardValidity" placeholder="请上传证件"></el-input>-->

          <el-date-picker clearable size="small" v-model="cardValidity" type="date" value-format="yyyy-MM-dd"
            placeholder="选择证件失效日期" class="el-input-style">
          </el-date-picker>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="提交证件正面">
          <ImageUpload v-model="idCardUrl" :limit="1" @success="recognitionCertificate($event, 1)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="提交证件背面">
          <ImageUpload v-model="idCardBackUrl" :limit="1" @success="recognitionCertificate($event, 2)" />
        </el-form-item>
      </el-col>

    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="驾驶证类型">
          <!--                    <el-input v-model="drivingType" placeholder="请上传证件"></el-input>-->
          <el-select v-model="drivingType" clearable>
            <template v-for="dict in dict.type.drivers_license">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="失效日期">
          <!--                    <el-input v-model="drivingValidity" placeholder="请上传证件"></el-input>-->
          <el-date-picker clearable size="small" v-model="drivingValidity" type="date" value-format="yyyy-MM-dd"
            placeholder="选择驾驶证失效日期" class="el-input-style">
          </el-date-picker>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="提交驾驶证">
          <ImageUpload v-model="driverUrl" :limit="1" @success="recognitionCertificate($event, 3)" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="提交驾驶证副页">
          <ImageUpload v-model="driverBackUrl" :limit="1" />
        </el-form-item>
      </el-col>

    </el-row>


    <el-row :gutter="15" v-if="electronicContractEnable==1">
      <el-col :span="12">
        <el-form-item label="印章内容">
          <el-input v-model="sealName" placeholder="请输入印章内容"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="邮箱">
          <el-input v-model="email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
      </el-col>

    </el-row>

    <el-row :gutter="15">
      <el-col :span="24">
        <el-form-item label="备注">
          <el-input v-model="remark" type="textarea" placeholder="请输入备注" :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import * as api from '@/api/member/member';
import ImageUpload from '@/components/ImageUpload/index.vue';

export default {
  components: {
    ImageUpload,
  },
  dicts: [
    'memberType',
    'memberSource',
    'document_type',
    'drivers_license',
  ],
  props: ['editid', 'electronicContractEnable'],
  data() {
    return {
      loading: false,
      memberNo: null, // 客户编号
      memberName: '', // 客户名称
      memberType: 2, // 客户类型（1.企业 2.个人）
      memberSource: 5, // 客户来源（1.搜索 2.分享 3.扫码 4.手动录入）
      contactPhone: '', // 手机号
      contactAddress: '', // 联系地址
      documentType: 1, // 证件类型
      cardId: '', // 证件号
      cardValidity: '', // 证件有效期
      drivingId: '', // 驾驶证编号
      drivingType: '', // 驾驶证类型
      drivingValidity: '', // 驾驶证有效期
      jsUrl: [], // 驾驶证图片
      sfUrl: [], // 证件图片
      businessLicenseUrl: '', // 营业执照(客户类型为企业必填)
      enterpriseName: '', // 企业名称(客户类型为企业必填)
      creditCode: '', // 统一社会信用代码(客户类型为企业必填)
      enterpriseAdderss: '', // 企业地址(客户类型为企业必填)
      remark: '', // 备注
      // 证件
      idCardUrl: '',
      idCardBackUrl: '',
      driverUrl: '',
      driverBackUrl: '',
      //
      phoneError: '',
      sealName:'',
      email:'',
      // 表单校验
      rules: {
        memberType: [{
          required: true,
          message: "请选择客户类型",
          trigger: "change"
        }],
        memberSource: [{
          required: true,
          message: "请选择客户来源",
          trigger: "change"
        }],
        enterpriseName: [{
          required: true,
          message: "企业名称不能为空",
          trigger: "change"
        }],
        memberName: [{
          required: true,
          message: "名称不能为空",
          trigger: "change"
        }],
        contactPhone: [{
          required: true,
          message: "联系电话不能为空",
          trigger: "change"
        }, {
          pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
          message: "手机号格式不正确,请检查",
          trigger: "blur",
        },],
      }
    };
  },
  computed: {
    formData() {
      const params = {
        memberName: this.memberName, // 客户名称
        memberType: this.memberType, // 客户类型（1.企业 2.个人）
        memberSource: this.memberSource, // 客户来源（1.搜索 2.分享 3.扫码 4.手动录入）
        contactPhone: this.contactPhone, // 手机号
        contactAddress: this.contactAddress, // 联系地址
        documentType: this.documentType, // 证件号
        cardId: this.cardId, // 证件号
        cardValidity: this.cardValidity, // 证件有效期
        drivingId: this.cardId, // 驾驶证编号
        drivingType: this.drivingType, // 驾驶证类型
        drivingValidity: this.drivingValidity, // 驾驶证有效期
        // jsUrl: [this.jsshizheng, this.jsshizheng2], // 驾驶证图片
        // sfUrl: [this.idCard, this.idCardBack], // 证件图片
        idCardUrl: this.idCardUrl, // 身份证正面
        idCardBackUrl: this.idCardBackUrl, // 身份证反面
        driverUrl: this.driverUrl, // 驾驶证正面
        driverBackUrl: this.driverBackUrl, // 驾驶证反面
        remark: this.remark, // 备注
        sealName : this.sealName,//印章内容
        email : this.email//邮箱
      };
      if (this.memberType == 1) {
        Object.assign(params, {
          businessLicenseUrl: this.businessLicenseUrl, // 营业执照(客户类型为企业必填)
          enterpriseName: this.enterpriseName, // 企业名称(客户类型为企业必填)
          creditCode: this.creditCode, // 统一社会信用代码(客户类型为企业必填)
          enterpriseAdderss: this.enterpriseAdderss, // 企业地址(客户类型为企业必填)
        });
      }
      if (this.memberNo) {
        params.memberNo = this.memberNo; // 客户编号
      }
      return params;
    },
  },
  mounted() {
    this.editid && api.getBasic(this.editid).then(response => {
      // console.log(response);
      this.memberNo = response.data.memberNo; // 客户编号
      this.memberName = response.data.memberName; // 客户名称
      this.memberType = Number(response.data.memberType); // 客户类型（1.企业 2.个人）
      this.memberSource = Number(response.data.memberSource); // 客户来源（1.搜索 2.分享 3.扫码 4.手动录入）
      this.contactPhone = response.data.contactPhone; // 手机号
      this.contactAddress = response.data.contactAddress; // 联系地址
      this.documentType = response.data.documentType; // 证件号
      this.cardId = response.data.cardId; // 证件号
      this.cardValidity = response.data.cardValidity; // 证件有效期
      this.drivingId = response.data.drivingId; // 驾驶证编号
      this.drivingType = response.data.drivingType; // 驾驶证类型
      this.drivingValidity = response.data.drivingValidity; // 驾驶证有效期

      this.idCardUrl = response.data.idCardUrl; // 身份证正面
      this.idCardBackUrl = response.data.idCardBackUrl; // 身份证反面
      this.driverUrl = response.data.driverUrl; // 驾驶证正面
      this.driverBackUrl = response.data.driverBackUrl; // 驾驶证反面

      this.businessLicenseUrl = response.data.businessLicenseUrl; // 营业执照(客户类型为企业必填)
      this.enterpriseName = response.data.enterpriseName; // 企业名称(客户类型为企业必填)
      this.creditCode = response.data.creditCode; // 统一社会信用代码(客户类型为企业必填)
      this.enterpriseAdderss = response.data.enterpriseAdderss; // 企业地址(客户类型为企业必填)
      this.remark = response.data.remark; // 备注
      this.sealName = response.data.sealName;//印章内容
      this.email = response.data.email;//邮箱
    });
  },
  methods: {
    /** 验证手机号 */
    onBlurPhone() {
      if (!/^1[23456789]\d{9}$/.test(this.contactPhone)) {
        this.phoneError = '手机号格式错误'
      } else {
        this.phoneError = '';
      }
    },
    /**
     * 抛出表单
     */
    emitData() {
      return this.formData;
    },
    validate() {
      return new Promise(resolve => {
        this.$refs['form'].validate(valid => {
          resolve(valid);
        });
      });
    },
    /**
     * 证件识别
     * @descript 证件类型(1.证件正面 2.证件反面 3.驾驶证主页)
     */
    recognitionCertificate(res, type) {
      const url = res.fileName;
      // const url = res.nginxUrl;
      if (type == 1 && this.cardId ) {
        return;
      } else if (type == 2 && this.endTime) {
        return;
      } else if (type == 3 && (this.drivingId || this.drivingType || this.drivingValidity)) {
        return;
      } else {
        this.loading = true;
        api.recognitionCertificate({ type, url, }).then(response => {
          this.$message.success(response.msg);
          if (response.data.idCard && type == 1) {
            this.cardId = response.data.idCard; // 证件号
            this.memberName = response.data.name; // 真实姓名
          }
          if (response.data.endTime && type == 2) {
            this.cardValidity = response.data.endTime; // 证件有效期
          }
          if (
            response.data.driverNo &&
            response.data.driverType &&
            response.data.endTime && type == 3
          ) {
            this.drivingId = response.data.driverNo; // 驾驶证编号
            this.drivingType = response.data.driverType; // 驾驶证类型
            this.drivingValidity = response.data.endTime; // 驾驶证有效期
          }
          this.loading = false;
        }).catch(err => {
          this.loading = false;
        })
      }

    },
  },
}
</script>
<style scoped>
/deep/ input {
  width: 350px !important;
  height: 36px !important;
  line-height: 36px !important;
}
</style>
